<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:output method="html" version="1.0" encoding="UTF-8" media-type="text/html"/>

    <xsl:strip-space elements="*"/>

    <xsl:template match="text()|@*"/>

    <xsl:template match="messages">
        <html>
            <head>
                <style type="text/css">
                    <xsl:text>
                    quote {
                        font-size: 12pt;
                        font-family: "Arial";
                        display: block;
                        width: 40%;
                        margin-left: 5%;
                        margin-bottom: 1em;
                        text-align: justify;
                    }
                    quote.in {
                        color: red;
                    }
                    quote.out {
                        color: blue;
                        padding-left: 3em;
                    }
                    quote span {
                        font-size: 7pt;
                        color: black;
                        display: none;
                    }
                    </xsl:text>
                </style>
            </head>
            <body>
                <xsl:apply-templates select="msg"/>
            </body>
        </html>
    </xsl:template>

    <xsl:template match="msg">
        <p>
        <quote>
            <xsl:attribute name="class">
                <xsl:choose>
                    <xsl:when test="@type = 'out'">
                        <xsl:text>out</xsl:text>
                    </xsl:when>
                    <xsl:when test="@type = 'in'">
                        <xsl:text>in</xsl:text>
                    </xsl:when>
                </xsl:choose>
            </xsl:attribute>
            <span class="time">
                <xsl:value-of select="time"/>
            </span>
            <xsl:value-of select="text()"/>
        </quote>
        </p>
    </xsl:template>

</xsl:stylesheet>
